<div class="fm">
    <div class="textSize4 textBold600">FindMedia Tool</div>
    <div class="pushTopTrivial" translate>This tool is a combination of FindUnmatched and FindMissing.</div>
    <div translate>Select one of the libraries below to scan for videos/shows that are not in the Plex database or is not on your harddrive.</div>

    <content-loading ng-if="webtoolsModel.fmLoading" class="pushTopMinor"></content-loading>
    <div ng-if="!webtoolsModel.fmLoading">
        <div class="pushTopMinor settings" ng-class="{'hideFields' : !fmModel.settingsVisible}">
            <div class="row toggleSettings">
                <div class="col-xs-12">
                    <div class="pull-right">
                        <label for="showSettings" translate>Show settings</label>
                        <button id="showSettings" ng-click="fmModel.settingsVisible = !fmModel.settingsVisible" ng-title="lang.hideShowMenu|translate"><i class="fa" ng-class="{'fa-eye-slash' : !fmModel.settingsVisible, 'fa-eye' : fmModel.settingsVisible}" aria-hidden="true"></i></button>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <input id="ignoreHidden" class="ignoreHidden" type="checkbox" ng-model="fmModel.settings.IGNORE_HIDDEN" />
                    <label for="ignoreHidden" translate>Ignore Hidden</label>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <input id="ignoreSpecials" class="ignoreSpecials" type="checkbox" ng-model="fmModel.settings.IGNORE_SPECIALS" />
                    <label for="ignoreSpecials" translate>Ignore Specials</label>
                </div>
            </div>            
            <div class="row">
                <div class="col-xs-12">
                    <input id="ignoreExtras" class="ignoreExtras" type="checkbox" ng-model="fmModel.settings.IGNORE_EXTRAS" />
                    <label for="ignoreExtras" translate>Ignore Extras</label>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <span class="textBold600" translate>Ignore folders</span>
                </div>
            </div>
            <div class="row" ng-repeat="IGNORED_DIR in fmModel.settings.IGNORED_DIRS track by $index">
                <div class="col-xs-12">
                    <button ng-click="fmModel.settings.IGNORED_DIRS.splice(fmModel.settings.IGNORED_DIRS.indexOf(IGNORED_DIR), 1)" ng-title="lang.deleteIgnoredFolder|translate"><i class="fa fa-minus" aria-hidden="true"></i></button>
                    <input type="text" class="ignoreDir" ng-model="IGNORED_DIR" ng-change="fmModel.settings.IGNORED_DIRS[$index] = IGNORED_DIR" />
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <button id="addIgnoredFolder" ng-click="fmModel.settings.IGNORED_DIRS.push('')" ng-title="lang.addIgnoredFolder|translate"><i class="fa fa-plus" aria-hidden="true"></i></button>
                    <label for="addIgnoredFolder" translate>Add ignored folder</label>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <span class="textBold600" translate>Valid extentions</span>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <textarea class="validExtensions" ng-model="fmModel.settings.VALID_EXTENSIONS_TEMP"></textarea>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="pull-right">
                        <label for="resetSettings" translate>Reset settings</label>
                        <button id="resetSettings" ng-click="resetSettings()" ng-title="lang.resetSettings|translate"><i class="fa" ng-class="{'fa-spinner' : fmModel.settingsLoading, 'fa-undo' : !fmModel.settingsLoading}" aria-hidden="true"></i></button>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="pull-right">
                        <label for="saveSettings" translate>Save settings</label>
                        <button id="saveSettings" ng-click="saveSettings()" ng-title="lang.saveSettings|translate"><i class="fa" ng-class="{'fa-spinner' : fmModel.settingsLoading, 'fa-floppy-o' : !fmModel.settingsLoading}" aria-hidden="true"></i></button>
                    </div>
                </div>
            </div>

        </div>

        <div class="pushTopMinor sections">
            <div ng-if="fmModel.scanning">
                <br />
                <label for="scanStop" translate>Abort scan</label> <button id="scanStop" ng-click="scanStop()" ng-title="lang.abortScan|translate"><i class="fa fa-ban" aria-hidden="true"></i></button><br />
                <i>{[{fmModel.statusText}]}</i>

            </div>
            <div ng-if="!fmModel.scanning">
                <div class="section" ng-repeat="section in fmModel.sections">
                    <div class="type">
                        <img ng-src="icons/{[{section.type}]}.png">
                    </div>
                    <div class="row header textSize3 textBold600" ng-click="scanStart(section)">
                        <div class="col-xs-12">{[{section.title}]}</div>
                    </div>
                    <div class="row result" ng-if="section.result">
                        <div class="col-xs-12">
                            <div class="row">
                                <div class="col-xs-12">
                                    <div class="download textBold600" ng-click="downloadResult(section);">
                                        <div class="fa fa-download" ng-title="lang.downloadResult|translate"></div> <translate>Download result</translate>
                                    </div>
                                </div>
                            </div>
                            <div class="row"><div class="col-xs-12"><hr /></div></div>
                            <div class="row" ng-if="section.result.MissingFromDB.length === 0">
                                <div class="col-xs-12 textBold600" translate>Perfect, media files are present and accessible for all items in the Plex database.</div>                                
                            </div>
                            <div class="row" ng-if="section.result.MissingFromDB.length > 0">
                                <div class="col-xs-12 textBold600" translate>The following media files on disk are not referenced in Plex's database. (They were either ignored because they are incorrectly named or the library hasn't been updated yet after they were added)</div>
                            </div>
                            <div class="row" ng-repeat="missingFromDb in section.result.MissingFromDB track by $index">
                                <div class="col-xs-12">
                                    {[{missingFromDb}]}
                                </div>
                            </div>
                            <div class="row"><div class="col-xs-12"><hr /></div></div>
                            <div class="row" ng-if="section.result.MissingFromFS.length === 0">
                                <div class="col-xs-12 textBold600" translate>Perfect, all media files are present in database</div>
                            </div>
                            <div class="row" ng-if="section.result.MissingFromFS.length > 0">
                                <div class="col-xs-12 textBold600" translate>These media files are missing, but the Plex database still has them listed. They were either deleted, the hard drive got disconnected or moved or you simply forgot to empty the library trash in Plex if you erased them intentionally</div>
                            </div>
                            <div class="row" ng-repeat="missingFromFS in section.result.MissingFromFS track by $index">
                                <div class="col-xs-12">
                                    {[{missingFromFS}]}
                                </div>
                            </div>
                            <div class="row"><div class="col-xs-12"><hr /></div></div>
                            <div class="row" ng-if="section.result.Unmatched.length === 0">
                                <div class="col-xs-12 textBold600" translate>No items missing metadata</div>
                            </div>
                            <div class="row" ng-if="section.result.Unmatched.length > 0">
                                <div class="col-xs-12 textBold600" translate>Items missing metadata</div>
                            </div>
                            <div class="row" ng-repeat="Unmatched in section.result.Unmatched track by $index">
                                <div class="col-xs-12">
                                    {[{Unmatched}]}
                                </div>
                            </div>                            
                            <div class="row"><div class="col-xs-12"><hr /></div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>